<template>
  <div>
    <div class="head">
      <div class="head_left">
        <div class="head_leftH">已发布积分</div>
        <div class="head_leftB">
          <div class="head_leftBbox">
            <div class="num ellipseHide">{{info.integralSpecies}}</div>
            <p class="title">种类</p>
          </div>
          <div class="head_leftBbox">
            <div class="num ellipseHide">¥{{info.releaseValue}}</div>
            <p class="title">已发布价值</p>
          </div>
          <!-- <div class="head_leftBbox">
            <div class="num ellipseHide">¥{{info.remainingValue}}</div>
            <p class="title">剩余可发布额度</p>
          </div> -->
        </div>
      </div>
      <div class="head_right">
        <div class="head_leftH">已发布券</div>
        <div class="num ellipseHide">{{info.releaseTicket}} 个</div>
      </div>
      <div class="head_left">
        <div class="head_leftH">已发布卡</div>
        <div class="head_leftB">
          <div class="head_leftBbox">
            <div class="num ellipseHide">{{cardInfo.number}}</div>
            <p class="title">已发放数量</p>
          </div>
          <div class="head_leftBbox">
            <div class="num ellipseHide">¥{{cardInfo.payMoneyTotal}}</div>
            <p class="title">已发放价值</p>
          </div>
        </div>
      </div>
    </div>
    <div class="assets_detail">
      <publicIntegralList />
    </div>
    <div class="assets_detail">
      <publicCouponsList />
    </div>
    <div class="assets_detail">
      <publicCard />
    </div>
    <div class="bottom">
        <el-button type="primary" @click="back">返回</el-button>
    </div>
  </div>
</template>
<script>
import { merchantAssetInfo,cardOrderStatistics } from "@/api/merchants";
import publicIntegralList from './assetsComponents/publicIntegralList'
import publicCouponsList from './assetsComponents/publicCouponsList'
import publicCard from './assetsComponents/publicCard'
export default {
  name: "assetsDetail",
  components: {
    publicIntegralList,
    publicCouponsList,
    publicCard
  },
  data() {
    return {
      id: '',
      info:{},
      loading: false,
      cardInfo:{},
    };
  },
  created(){
    
  },
  mounted(){
    let query = this.$route.query
    this.id = query.id
    this.getinfo()
    this.getcardinfo()
  },
  methods: { 
    getinfo() {
      const params = {
        merchantId: this.id
      };
      merchantAssetInfo(params).then((res) => {
        this.info = res.result
      })
    },
    getcardinfo() { //cardOrderStatistics
      const params = {
        merchantId: this.id
      };
      cardOrderStatistics(params).then((res) => {
        this.cardInfo = res.result
      })
    },
    back(){
      this.$router.push({
        path: "/merchants/MerchantsList",
      });
    },
  },
};
</script>
<style scoped>
.head {
  display: flex;
  align-items: center;
  box-shadow: 0px 4px 12px 0px rgba(1, 41, 99, 0.06);
  border-radius: 8px;
  background-color: #ffffff;
  padding: 20px;
}
.head_left {
  padding: 10px 0px;
  height: 122px;
  width: 26%;
  border-radius: 8px;
  background: linear-gradient(180deg, #35c2f5, #00abff);
  box-shadow: 2px 4px 16px 0px rgba(107, 201, 255, 0.6);
  color: #ffffff;
}
.head_leftH {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  margin-left: 20px;
}
.head_leftB {
  display: flex;
  align-items: center;
}
.head_leftBbox {
  width: calc(100% / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.num {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
  font-weight: bold;
}
.title {
  margin-bottom: 10px;
}
.ellipseHide {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.head_right {
  /* display: flex;
  justify-content: center;
  flex-direction: column; */
  height: 122px;
  padding: 10px 0px;
  width: 12%;
  border-radius: 8px;
  box-shadow: 2px 4px 16px 0px rgba(255, 192, 107, 0.6);
  color: #ffffff;
  background: linear-gradient(180deg, #ffb34b, #ff9300);
  margin:0 40px;
}
.head_right .num {
  margin-top: 32px;
}
.bottom{
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.bottom .el-button--medium{
    padding: 10px 54px;
}
</style>